<template>
  <div
    class="title-bar"
    :style="{
      width: props.imgWidth,
      backgroundImage: `url(${props.bgUrl || defaultBg})`,
    }"
  >
    <span class="text">{{ titleText }}</span>
  </div>
</template>
<script setup lang="ts">
import defaultBg from "@/assets/img/tianqi-title-bar1.svg";
const props = defineProps({
  titleText: {
    type: String,
    default: "",
  },
  imgWidth: {
    type: String,
    default: "450px",
  },
  bgUrl: {
    type: String,
    default: null,
  },
});
</script>

<style lang="less" scoped>
.title-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 48px;
  line-height: 48px;
  background-repeat: no-repeat;

  .text {
    position: relative;
    left: 32px;
    width: 108px;
    height: 26px;
    color: rgb(255, 255, 255);
    font-family: 思源黑体 CN;
    font-size: 18px;
    font-weight: 400;
  }
}
</style>
